<template>
    <el-drawer
        size="300"
        :show-close="false"
        :modal="false"
        :visible.sync="drawer">
      <div style="padding:20px" :key="key">
        <el-divider content-position="center">切换动画</el-divider>
        <el-form label-position="left" label-width="100px" v-model="slideAnimation">
            <el-form-item  label="场景个数">
              <el-input-number v-model="slideAnimation.steps" :min="1" :max="10" size="mini" controls-position="right"></el-input-number>
            </el-form-item>
            <el-form-item  label="进入动画">
               <el-select v-model="slideAnimation.enter" placeholder="fadeIn" size="mini" @change="enterChange">
                <el-option v-for="(item,index) in enterOption" :label="item.label" :value="item.value" :key="index"/>
              </el-select>
            </el-form-item>
            <el-form-item  label="离开动画">
               <el-select v-model="slideAnimation.leave" placeholder="fadeOut" size="mini" @change="leaveChange">
                <el-option v-for="(item,index) in leaveOption" :label="item.label" :value="item.value" :key="index"/>
              </el-select>
            </el-form-item>
        </el-form>
        <el-divider content-position="center">项目动画</el-divider>
        <el-form label-position="left" label-width="100px" v-model="itemAnimation">
            <el-form-item  label="入场顺序">
              <el-input-number v-model="itemAnimation.order" :min="1" :max="10" size="mini" controls-position="right"></el-input-number>
            </el-form-item>
            <el-form-item  label="入场动画">
               <el-select v-model="itemAnimation.enter" placeholder="fadeIn" size="mini" @change="enterChange">
                <el-option v-for="(item,index) in enterOption" :label="item.label" :value="item.value" :key="index"/>
              </el-select>
            </el-form-item>
        </el-form>
      </div>
      <transition :enter-active-class="enter" :duration="1000">
        <h1 v-show="enterFlag" class="animated" >TU SHOW</h1>
      </transition>
      <transition :leave-active-class="leave" :duration="1000">
        <h1 v-show="leaveFlag" class="animated" >TU SHOW</h1>
      </transition>
    </el-drawer>
</template>
<script>

export default {
  data () {
    return {
      enterFlag: true,
      leaveFlag: true,
      enter: 'bounceIn',
      leave: 'rollOut',
      key: 1,
      key2: 1,
      drawer: false,
      enterOption: [
        { label: '弹跳', value: 'bounce' },
        { label: '闪光', value: 'flash' },
        { label: '脉冲', value: 'pulse' },
        { label: '橡皮筋', value: 'rubberBand' },
        { label: '抖动', value: 'shake' },
        { label: '摇摆', value: 'swing' },
        { label: 'tada', value: 'tada' },
        { label: '摇晃', value: 'wobble' },
        { label: 'jello', value: 'jello' },
        { label: '心跳', value: 'heartBeat' },
        { label: '弹跳进入', value: 'bounceIn' },
        { label: '左侧弹跳', value: 'bounceInLeft' },
        { label: '右侧弹跳', value: 'bounceInRight' },
        { label: '上方弹跳', value: 'bounceInUp' },
        { label: '下方弹跳', value: 'bounceInDown' },
        { label: '淡入', value: 'fadeIn' },
        { label: '左侧淡入', value: 'fadeInLeft' },
        { label: '右侧淡入', value: 'fadeInRight' },
        { label: '上方淡入', value: 'fadeInDown' },
        { label: '下方淡入', value: 'fadeInUp' },
        { label: '翻转', value: 'flip' },
        { label: '翻转-X', value: 'flipInX' },
        { label: '翻转-Y', value: 'flipInY' },
        { label: '光速', value: 'lightSpeedIn' },
        { label: '旋转', value: 'rotateIn' },
        { label: '左侧旋转', value: 'rotateInDownLeft' },
        { label: '右侧旋转', value: 'rotateInDownRight' },
        { label: '上方旋转', value: 'rotateInUpLeft' },
        { label: '下方旋转', value: 'rotateInDownRight' },
        { label: '左侧浮入', value: 'slideInLeft' },
        { label: '右侧浮入', value: 'slideInRight' },
        { label: '下方浮入', value: 'slideInUp' },
        { label: '上方浮入', value: 'slideInDown' },
        { label: '缩放', value: 'zoomIn' },
        { label: '左-缩放', value: 'zoomInLeft' },
        { label: '右-缩放', value: 'zoomInRight' },
        { label: '上-缩放', value: 'zoomInDown' },
        { label: '下-缩放', value: 'zoomInUp' },
        { label: '转入', value: 'rollIn' }
      ],
      leaveOption: [
        { label: '弹出', value: 'bounceOut' },
        { label: '弹出-左', value: 'bounceOutLeft' },
        { label: '弹出-右', value: 'bounceOutRight' },
        { label: '弹出-上', value: 'bounceOutUp' },
        { label: '弹出-下', value: 'bounceOutDown' },
        { label: '淡出', value: 'fadeOut' },
        { label: '淡出-左', value: 'fadeOutLeft' },
        { label: '淡出-右', value: 'fadeOutRight' },
        { label: '淡出-上', value: 'fadeOutUp' },
        { label: '淡出-下', value: 'fadeOutDown' },
        { label: '翻转-X', value: 'flipOutX' },
        { label: '翻转-Y', value: 'flipOutY' },
        { label: '光速', value: 'lightSpeedOut' },
        { label: '旋转', value: 'rotateOut' },
        { label: '旋转-左下', value: 'rotateOutDownLeft' },
        { label: '旋转-右下', value: 'rotateOutDownRight' },
        { label: '旋转-左上', value: 'rotateOutUpLeft' },
        { label: '旋转-右上', value: 'rotateOutUpRight' },
        { label: '左侧浮出', value: 'slideOutLeft' },
        { label: '右侧浮出', value: 'slideOutRight' },
        { label: '上方浮出', value: 'slideOutUp' },
        { label: '下方浮出', value: 'slideOutDown' },
        { label: '缩放', value: 'zoomOut' },
        { label: '缩放-左', value: 'zoomOutLeft' },
        { label: '缩放-右', value: 'zoomOutRight' },
        { label: '缩放-上', value: 'zoomOutUp' },
        { label: '缩放-下', value: 'zoomOutDown' },
        { label: '掉落', value: 'hinge' },
        { label: '转出', value: 'rollOut' }
      ]
    }
  },
  computed: {
    slideAnimation () {
      return this.$store.state.layout[this.$store.state.activeArrayIndex].slideAnimation
    },
    itemAnimation () {
      return this.$store.state.layout[this.$store.state.activeArrayIndex].SlideContent[this.$store.state.insideActiveArrayIndex].itemAnimation
    }
  },
  methods: {
    ini () {
      this.key += 1
    },
    enterChange (val) {
      console.log(val)
      this.enter = val
      this.enterFlag = false
      this.$nextTick(() => {
                    this.enterFlag = true
                })
    },
    leaveChange (val) {
      console.log(val)
      this.leave = val
      this.leaveFlag = true
      this.$nextTick(() => {
                    this.leaveFlag = false
                })
      setTimeout(() => {
        this.leaveFlag = true
      }, 1500)
    }
  },
  mounted () {
  },
  watch: {
  },
  components: {
  }
}
</script>

<style scoped>
</style>
